.menu-box__wrap {
  overflow: hidden;
}

.menu-box {
  display: flex;
  padding: 30px;
  margin-bottom: 13px;
  background: #fff;

  .menus-wrap {
    display: grid;
    width: calc(100% - 480px);
    height: 382px;
    overflow: hidden;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(2, 50%);

    li {
      display: flex;
      flex-direction: column;
      text-align: center;
      padding-top: 8px;
      cursor: pointer;

      span {
        svg {
          transition: .2s ease-out;
        }
      }

      &:hover {
        span {
          svg {
            transform: scale(1.3);
          }
        }
      }

      span {
        color: #2F9DF9;
      }

      .text {
        margin-top: -15px;
        font-size: 18px;
      }
    }
  }

  &:nth-child(2) {
    .title {
      background: linear-gradient(244deg, #F35926 0%, #FFCC4A 100%);

      &::before {
        background: #FFDF71;
      }

      &::after {
        background: #FFD962;
      }
    }
  }

  &:nth-child(3) {
    .title {
      background: linear-gradient(244deg, #3C50FF 0%, #8EA0FF 100%);

      &::before {
        background: #81A5FF;
      }

      &::after {
        background: #7D97FF;
      }
    }
  }

  &:nth-child(4) {
    .title {
      background: linear-gradient(244deg, #FD2C50 0%, #F9848B 100%);

      &::before {
        background: #FF8893;
      }

      &::after {
        background: #FF7584;
      }
    }
  }

  &:nth-child(5) {
    .title {
      background: linear-gradient(244deg, #7B57FE 0%, #CC8AFF 100%);

      &::before {
        background: #C782FF;
      }

      &::after {
        background: #BE6FFF;
      }
    }
  }

  &:nth-child(6) {
    .title {
      background: linear-gradient(244deg, #35DF73 0%, #3BFFDA 100%);

      &::before {
        background: #79FFD6;
      }

      &::after {
        background: #68FFD1;
      }
    }
  }

  .title {
    overflow: hidden;
    position: relative;
    width: 548px;
    height: 382px;
    line-height: 382px;
    text-indent: 87px;
    font-size: 69px;

    color: #fff;
    font-weight: bold;
    background: linear-gradient(244deg, #0768EB 0%, #42B6FF 100%);

    &::after,
    &::before {
      content: '';
      position: absolute;
      right: -183px;
      width: 348px;
      height: 348px;
      opacity: 0.9;
      border-radius: 100%;
    }

    &::before {
      top: -98px;
      background: #4FBDFF;
      z-index: 2;
    }

    &::after {
      bottom: -131px;
      background: #3CA4FF;
    }
  }
}